<template>
  <div class="page-department">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>角色管理
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span>
            {{title}}
          </p>
          <div class="right">
            <button @click="handleEdit()">添加角色</button>
          </div>
        </div>
      </div>
    </div>

    <div class="table">
      <el-table ref="multipleTable" :data="info" tooltip-effect="dark" style border>
        <el-table-column label="角色名称" align="center" width="230" prop="roleName"></el-table-column>
        <el-table-column label="系统权职描述" align="center" prop="roleDesc"></el-table-column>

        <el-table-column label="操作" width="230" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handlelimit(scope.$index,scope.row)"
              type="text"
              size="small"
              class="red"
              style="color:#1abc9a;"
            >权限设置</el-button>
            <el-button
              @click="handleEdit(scope.$index, scope.row)"
              type="text"
              size="small"
              class="red"
              style="color:#1abc9a;"
            >编辑</el-button>
            <el-button type="text" size="small" class="red" style="color:#1abc9a;" @click="delRole(scope.row.roleId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑弹窗 -->
    <div class="component-model">
      <el-dialog :title="modelTitle" :visible.sync="dialogVisible" width="600px">
        <div>
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="font-size: 12px"
            :rules="rule"
          >
            <el-form-item
              label="角色名称："
              prop="roleName"
              style="width:460px;margin:10px auto;font-size:12px !impotant;"
            >
              <el-input v-model="ruleForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="职能描述：" prop="roleDesc" style="width:460px;margin:20px auto;">
              <el-input type="textarea" v-model="ruleForm.roleDesc"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="submitForm('ruleForm')">提交</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 权限设置弹窗 -->
  </div>
</template>

<script>
import { log } from "util";
export default {
  name: "role",
  data() {
    return {
      title: "角色管理",
      modelTitle: "添加角色",
      // 弹窗表单
      ruleForm: {
      },
      // 表单验证规则
      rule: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, message: "请输入职能描述", trigger: "blur" }
        ]
      },
      // 查询到的部门信息列表
      info: [],
      //根据thData来渲染表头,title属性决定表头项，width属性决定每一列的宽度，单位px
      dialogVisible: false
    };
  },
  created() {
    this.dataInit();
  },
  methods: {
    // 查询所有部门
    dataInit() {
      let that = this,
        suCb = function(res) {
          that.info = that.deepClone(res.data.data);
          console.log('查询结果',that.info);
        },
        erCb = function(res) {
          console.log(res);
        },
        palyParam = {
          url: "/api/web/sysRole/findList",
          methods: "post",
          data: {},
          success: suCb,
          error: erCb
        };
      that.$https(palyParam);
    },
    // 点击修改或编辑 弹出窗口
    handleEdit(index, data) {
      console.log(data);
      this.dialogVisible = true;
      if (index === undefined) {
        this.modelTitle = "添加角色";
        this.ruleForm = {
          roleName:"",
        roleDesc:"",
        roleId:""
        };
      } else {
        this.modelTitle = "编辑角色";
        this.ruleForm = this.deepClone(data);
      }
    },
    // 跳转到权限设置页面
    handlelimit(index, val) {
      this.$router.push({
        path: "/api/web/roleLimitConfig",
        name: "roleLimitConfig",
        params: {
          roles: val
        }
      });
    },
    // 提交弹窗表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let that = this,
            suCb = res => {
              console.log(res);
              if(res.data.flag == 1){
                this.$msg('提交成功！')
                that.dialogVisible = false ;
                that.dataInit();
              }
            },
            erCb = res => {
              that.$msg('角色名称已存在')
            },
            palyParam = {
              url: "/api/web/sysRole/insertInfo",
              methods: "post",
              data: {
                roleName:that.ruleForm.roleName,
                roleDesc:that.ruleForm.roleDesc,
                roleId:that.ruleForm.roleId,
              },
              success: suCb,
              error: erCb
            };
            console.log(palyParam.data);
          that.$https(palyParam);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除角色
    delRole(id){
      let that = this,
            suCb = res => {
              if(res.data.flag == 1){
                this.$msg("删除成功")
                that.dialogVisible = false ;
                that.dataInit();
              }
            },
            erCb = res => {
              console.log(res);
            },
            palyParam = {
              url: "/api/web/sysRole/delectInfo",
              methods: "post",
              data: {roleId:id},
              success: suCb,
              error: erCb
            };
          that.$https(palyParam);
    }
  }
};
</script>

<style scoped>
.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-size: 14px;
  line-height: 45px;
  font-weight: 700;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 100px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

/* 表格 */

.table {
  width: 1100px;
  margin: 0 auto;
}

.el-table .cell a {
  color: #1abc9a;
  text-decoration: none;
  cursor: pointer;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}
</style>
